<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>柚子的游戏 之 实时聊天</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <script type="text/javascript">
          (function() {
              var scale = 1.0;
              var ratio = 1;
              var userAgent = navigator.userAgent;
              var match = userAgent.match(/Android/);
              var iosLt5 = navigator.userAgent.match(/iphone4|iphone5/i);
              if (!!match || !!iosLt5) {
                  document.write('<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">');
                  document.documentElement.style.fontSize = "50px";
              } else {
                  if (window.devicePixelRatio >= 2) {
                      scale *= 0.5;
                      ratio *= 2;
                      var text = '<meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', width=device-width, user-scalable=no" />';
                      document.write(text);
                      document.documentElement.style.fontSize = 50 * ratio + "px";
                   }
              }
          })();
        </script>
        <meta content="yes" name="apple-mobile-web-app-capable" >
        <meta content="black" name="apple-mobile-web-app-status-bar-style" >
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name='apple-touch-fullscreen' content='yes'>
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="msapplication-tap-highlight" content="no" />
        <meta name="format-detection" content="telephone=no">
        <meta name="format-detection" content="address=no">
        
    </head>

    <body>
        
        <section id="app" v-cloak>
            <header id="header" ref="header">{{tips}}</header>
            <section id="wrapper" class="" ref="wrapper">
                <div id="scroller">
                    <ul>
                        <li>数据加载中</li>
                        <li v-for="item in list" :id="item.id" ref="li">
                            {{item.text}}
                        </li>
                        <li id="last"></li>
                    </ul>
                </div>
            </section>
            <footer id="footer" class="footer flex-cont">
                <span class="open-btn">+</span>
                <textarea class="text-input flex-item"></textarea>
                <span class="send-btn" @click="add">发送</span>
            </footer>
        </section>

        <script type="text/javascript" src="https://s.momocdn.com/w/u/js/2016/03/18/1458294646662-fastclick.js"></script>
        <script type="text/javascript">
            // $(function() {
            //   FastClick.attach(document.body);
            // });
            // window.onload = function(){
            //   var contentHeight = window.innerHeight - document.getElementById('header').offsetHeight - document.getElementById('footer').offsetHeight;
            //   document.getElementById('wrapper').style.height = contentHeight+'px';

        </script>
    </body>
</html>
